<template>
  <div class="goodsitem" @click="itemClick">
    <img :src="goodimg" alt="">
    <div class="info">
      <p>{{goodsitem.title}}</p>
      <span class="price">{{goodsitem.price}}</span>
      <span class="goodsimg"><img src="~assets/img/shoucang/shoucang1.svg" alt=""></span>
      <span class="collect">{{goodsitem.cfav}}</span>
    </div>
  </div>
</template>

<script>


export default {
  name: 'GoodsListItem',
  props:{
    goodsitem:{
      type: Object,
      default(){
        return {}
      }
    }
  },
  
  methods: {
    imageLoad() {
      this.$refs.scroll.scroll.refresh();   
      this.$bus.$emit('itemImageLoad')
    },
    itemClick(){
      this.$router.push('/detail/'+this.goodsitem.iid)
    }
  },
  computed:{
    goodimg(){
      return this.goodsitem.image || this.goodsitem.show.img 
    }
  }
}
</script>

<style>
  .goodsitem{
    padding-top: 20px;
    width: 48%;
    font-size: 14px;
  }

  .goodsitem img{
    width: 100%;
    border-radius: 5px;
  }

  .info p{
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 7px;
  }

  .info{
    text-align: center;
  }

  .price{
    color: mediumblue;
    padding: 5px 7px;
    line-height: 100%;
  }

  .goodsimg{
    padding: 5px 2px;
  }
  .goodsimg img{
    width: 14px;
    height: 14px;
  }

  .collect{
    line-height: 100%;
  }
</style>